//SPDX-FileCopyrightText: Copyright 2022-2024 深圳市同心圆网络有限公司
//SPDX-License-Identifier: GPL-3.0-only


import React from "react";
import { Badge, Popover, Tabs } from "antd";
import { observer } from 'mobx-react';
import UnreadCommentList from "./UnreadCommentList";
import { useStores } from "@/hooks";
import Button from "@/components/Button";

import BulletinList from "./BulletinList";
import { CloseOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { open as shell_open } from '@tauri-apps/api/shell';
import CodeEditor from '@uiw/react-textarea-code-editor';
import CodeCommentThreadList from "./CodeCommentThreadList";

const ChatAndCommentPanel = () => {
    const projectStore = useStores('projectStore');
    const projectModalStore = useStores('projectModalStore');

    return (
        <>
            <Tabs style={{ width: "100%" }} type="card"
                tabBarStyle={{ height: "45px", marginBottom: "0px" }}
                activeKey={projectStore.showChatAndCommentTab}
                onChange={key => projectStore.setShowChatAndComment(true, (key as ("comment" | "bulletin" | "member" | "codecomment" | "mywork")))}
                items={[
                    {
                        key: "bulletin",
                        label: (
                            <div>
                                <Badge count={(projectStore.curProject?.project_status.bulletin_count ?? 0)} offset={[0, -6]} style={{ padding: '0 3px', height: '16px', lineHeight: '16px' }}>
                                    公告
                                </Badge>
                            </div>
                        ),
                        children: (
                            <div style={{ height: "calc(100vh - 146px)", overflowY: "hidden" }}>
                                {projectStore.showChatAndCommentTab == "bulletin" && (<BulletinList />)}
                            </div>
                        )
                    },
                    {
                        key: "comment",
                        label: (
                            <div>
                                <Badge count={(projectStore.curProject?.project_status.unread_comment_count ?? 0)} offset={[0, -6]} style={{ padding: '0 3px', height: '16px', lineHeight: '16px' }}>
                                    未读评论
                                </Badge>
                            </div>),
                        children: (
                            <div style={{ height: "calc(100vh - 146px)", overflowY: "scroll" }}>
                                {projectStore.showChatAndCommentTab == "comment" && (<UnreadCommentList />)}
                            </div>
                        ),
                    },
                    {
                        key: "codecomment",
                        label: "代码评论",
                        children: (
                            <div style={{ height: "calc(100vh - 146px)", overflowY: "scroll" }}>
                                {projectStore.showChatAndCommentTab == "codecomment" && (<CodeCommentThreadList />)}
                            </div>
                        )
                    },
                ]} tabBarExtraContent={
                    <div style={{ marginRight: "10px" }}>
                        {projectStore.showChatAndCommentTab == "bulletin" && projectStore.isAdmin && !projectStore.isClosed && (
                            <Button onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                projectModalStore.projectId = projectStore.curProjectId;
                                projectModalStore.createBulletin = true;
                            }}>发布公告</Button>
                        )}
                        {projectStore.showChatAndCommentTab == "codecomment" && (
                            <Popover placement="bottom" trigger="hover" content={
                                <>
                                    <div>安装<a onClick={e => {
                                        e.stopPropagation();
                                        e.preventDefault();
                                        shell_open("https://marketplace.visualstudio.com/items?itemName=linksaas.local-api");
                                    }}>vscode插件</a>后,可进行代码评论。</div>
                                    <p>需要在项目根目录下创建.linksaas.yml，并写入以下内容：</p>
                                    <CodeEditor
                                        value={`project_id: ${projectStore.curProjectId}`}
                                        language="yaml"
                                        readOnly
                                        style={{
                                            fontSize: 14,
                                            backgroundColor: '#f5f5f5',
                                        }}
                                    />
                                </>
                            }>
                                <InfoCircleOutlined style={{ fontSize: "16px" }} />
                            </Popover>
                        )}
                        <Button type="text" style={{ minWidth: 0, padding: "0px 0px", marginLeft: "10px" }}
                            icon={<CloseOutlined style={{ fontSize: "18px" }} />} title="关闭面板"
                            onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                projectStore.setShowChatAndComment(false, "bulletin");
                            }} />
                    </div>
                } />
        </>
    );
};

export default observer(ChatAndCommentPanel);